<template>
  <div class="queryInlineForm">
    <t-form ref="form" labelAlign="left">
      <t-row :gutter="10">
        <t-col v-for="(item, index) in formConfiguration" :key="index" :span="item.span">
          <t-form-item :label="item.name" :labelWidth="item.labelWidth">
            <t-input
              v-if="item.type == 'input'"
              v-model="item.value"
              :disabled="item.disabled"
              :placeholder="item.placeholder"
              clearable
              :maxlength="item.maxlength"
            ></t-input>

            <t-date-range-picker
              v-if="item.type == 'timer'"
              v-model="item.value"
              allow-input
              clearable
              style="width: 100%"
              :defaultTime="item.defaultTime ? item.defaultTime : []"
              :disableDate="item.disableDate ? item.disableDate : []"
              :mode="item.mode"
              :placeholder="item.placeholder"
              :format="item.format"
              :valueType="item.valueType"
            />

            <t-cascader v-if="item.type == 'tree'" :options="item.options" v-model="item.value" clearable />

            <t-select
              v-if="item.type == 'select'"
              v-model="item.value"
              :placeholder="item.placeholder"
              :filterable="item.filterable ? item.filterable : false"
            >
              <t-option
                v-for="(ite, ind) in item.options"
                :key="item.valuename ? ite[item.valuename] : ind"
                :label="item.valuename ? ite[item.labelname] : ite"
                :value="item.valuename ? ite[item.valuename] : ind"
              ></t-option>
            </t-select>

            <!-- 按钮 这个地方全是搜索 重置 -->
            <div class="btn" ref="btn" v-if="item.type == 'button'">
              <t-button
                v-for="(ite, ind) in item.buttonArray"
                :key="ind"
                :theme="ite.theme"
                :style="ite.style"
                @click="ite.callback ? ite.callback() : ''"
              >
                {{ ite.bottonname }}
              </t-button>
            </div>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['formConfiguration'],
  data() {
    return {};
  },
  methods: {
    getValue() {
      let formData = {};
      this.formConfiguration.forEach(async (element, index) => {
        if (element.fromname) {
          formData[element.fromname] = element.value;
        }
      });
      return formData;
    },
  },
};
</script>
<style lang="less" scoped>
.queryInlineForm {
  width: 100%;
  height: 100%;

  .btn {
    display: flex;
    align-items: center;

    ::v-deep .t-button {
      margin-left: 24px;
    }
  }
}

::v-deep .t-col {
  margin-top: 16px;
  margin-right: 0px;
  padding-right: 14px !important;

  &:nth-last-child(2) {
    margin-right: 0;
  }
}

::v-deep .t-table tr {
  background-color: #f2f3f5;
}
</style>
